<template>
    <div class="account-component-box">
        <router-link class="un-account-box" :to="'/account/login'">
            <img class="user-portrait" src="../../assets/login/user.png" alt="" v-if="userInfo.profile === undefined||userInfo.profile === null"/>
            <img class="user-portrait" :src="userInfo.profile" alt="" v-if="userInfo.profile !== undefined&&userInfo.profile !== null"/>
            <div class="text-warn" v-if="userInfo.username === undefined" >读者登录</div>
            <div class="text-warn" v-if="userInfo.username !== undefined" >{{userInfo.username}}</div>
        </router-link>
    </div>
</template>

<script>
import CheckUserLogin from "@/mixins/CheckUserLogin"
export default {
    name: "AccountComponent",
    data(){
      return{

      }
    },
    mixins:[CheckUserLogin],
    mounted() {
      this.checkUserInfo()
    }
}
</script>

<style lang="less" scoped>
//phoone
@media only screen and (max-width:576px){
    .account-component-box{
        @height:7vw;
        display:flex;
        justify-content: center;
        align-items: center;
        .un-account-box{
            width:28vw;
            height:@height;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            .user-portrait{
                width:@height;
                height:@height;
                //border-radius: calc(@height / 2);
                //box-shadow: 0 0 1vw #5EA4EE;
            }
            .text-warn{
                width:20vw;
                height: @height;
                line-height: @height;
                text-align:center;
                color:white;
                font-size:4vw;
                font-weight:normal
            }
        }

    }
}

//pc
@media only screen and (min-width:576px){
    .account-component-box{

        @height:25px;
        display:flex;
        justify-content: center;
        align-items: center;
        .un-account-box{
            width:115px;
            height:@height;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            .user-portrait{
                width:@height;
                height:@height;
                //border-radius: calc(@height / 2);
                //box-shadow: 0 0 3px #5EA4EE;
            }
            .text-warn{
                width:75px;
                height: @height;
                line-height: @height;
                text-align:center;
                color:white;
                font-size:13px;
                font-weight:normal;
                cursor:pointer;
            }
        }
    }
}

</style>
